<template>
	<view>
        <view v-if="Object.keys(pageMsg).length">
            <view v-if="pageMsg">
                <view v-for="(item, index) in pageMsg.content">
                    <view v-if="item.type == 1" class="device-img img2">
                        <img :src="item.content" alt="" style="width: 100%; height: 100%">
                    </view>
                    <view v-if="item.type == 0" class="device-p">
                        <p class="text-tip"><span :style="{color: item.color, fontSize: item.size+'px'}">
                        {{item.content}}
                    </span></p>
                    </view>
                </view>
                <view class="foot-button">
                    <view class="foot-button">
                        <button class="block radius-btn" @tap="nextstep()" type="operation">{{$t('General.login.nextStep')}}</button>
                    </view>
                </view>
            </view>
        </view>
        <view v-else>
            <view class="device-img">
                <img src="https://statics.xmcsrv.net/weixin/Telkomsel/qscan.jpg" alt="">
            </view>
            <view class="device-p">
                <p>①{{$t('connectNet.please_point_qr_code')}}；</p>
                <p>②{{$t('connectNet.maintain_distance')}}；</p>
                <p>③{{$t('connectNet.move_away_after_prompt')}}；</p>
                <p>④{{$t('connectNet.configuration_success')}}；</p>
            </view>
            <view class="foot-button">
                <button data-code="601017" data-eventName="click_wifi_config_third_second_next_button" class="block radius-btn" @tap="nextstep()" type="operation">{{$t('General.login.nextStep')}}</button>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device: '',
                pageMsg: {}
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.device = opt.device;
			uni.setNavigationBarTitle({
			    title: this.$t('connectNet.enable_qr_code_on_phone')
			})
            if(opt.quickRC) {
                this.pageMsg = JSON.parse(opt.quickRC)
                if(Object.keys(this.pageMsg).length) {
                    uni.setNavigationBarTitle({
                        title: this.pageMsg.title
                    })
                }
            }
		},
		methods: {
			nextstep() {
				uni.redirectTo({
					url: '/jvss/pagesDevice/device/qrcode/qrcode?device=' + this.device
				});
			}
		}
	}
</script>

<style lang="scss">
	.device-img {
		width: 460rpx;
		height: 300rpx;
		/* border: #FF0025 1px solid; */
		margin: auto;
		margin-top: 60px;
		margin-bottom: 30px;
		img{
			width: 100%;
			height: 100%;
		}
	}

	.device-p {
		width: 85%;
		margin: auto;
		font-size: 28rpx;
		line-height: 50rpx;
	}
</style>
